<template>
  <transition name="fade">
    <div style="padding-top: 60px;">
      <item-list :data="items_data" @selectItem="selectItem"></item-list>
      <div v-show="!searchVal" class="words_wrap">
        <p>热门搜索</p>
        <ul>
          <li @click="select_search" v-for="(item,index) in words">{{item}}</li>
        </ul>
      </div>
      <p style="margin-top: 30px; color: #999" v-show="!items_data.length&&!isloading&&!isInit&&searchVal">抱歉没找到 ...</p>
      <p style="margin-top: 20px; color: #999" v-show="isInit">试着搜搜吧 ...</p>
      <p style="margin-top: 30px; color: #999" v-show="isloading">加载中 ...</p>
      <p style="margin-top: 30px; color: #999" v-show="!is_more">没有更多了 ...</p>
    </div>
  </transition>

</template>

<script type="text/ecmascript-6">
  import itemList from 'components/item_list'
  import {search_items, common_search_word} from 'api/search'
  import {w_scroll_top} from 'assets/dom/dom'
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    name: 'search',
    data() {
      return {
        items_data: [],
        isloading: false,
        isInit: true,
        page: 1,
        val_: "",
        is_more: true,
        words: []
      }
    },
    props: [],
    created() {
      this.brand_window_scroll()
      this.search_words()
    },
      mounted() {
    },
    computed: {
      ...mapGetters([
        'searchVal'
      ])
    },
    methods: {
      brand_window_scroll() {
        this.$parent.scroll_name1 = () => {
          if ((document.body.clientHeight - document.documentElement.clientHeight <= w_scroll_top() + 320) && !this.isloading) {
            if (this.$route.path === "/search" && this.items_data.length && this.is_more && !this.isloading) {
              this.search_items()
            }
          }
        }
        window.removeEventListener("scroll", this.$parent.scroll_name1)
        window.addEventListener("scroll", this.$parent.scroll_name1)
      },
      search_items(first) {
        this.isloading = true
        search_items({
          search: this.val_,
          page: this.page
        }).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.is_more = _res.data.isMore
              if (this.is_more) {
                this.page++
              }
              if (first) {
                this.items_data = _res.data.list
                w_scroll_top(0)
              } else {
                this.items_data = this.items_data.concat(_res.data.list)
              }

            } else {
              this.items_data = [];
            }
            this.isloading = false
          }
        }, () => {
          this.items_data = [];
          this.isloading = false
        })
      },
      search_words() {
        common_search_word({}).then((res) => {
          if (res.status === 200) {
            const _res = res.data
            if (_res.resStatus === 0) {
              this.words = _res.data
            }
          }
        })
      },
      select_search(e) {
        this.setSearchVal(e.target.textContent)
      },
      selectItem(id) {
        this.$emit('setkeep', 'detial')
        this.$router.push({
          path: '/detial',
          query: {
            itemId: id
          }
        })
      },
      ...mapMutations({
        setSearchVal: 'SET_SEARCH_VAL'
      })
    },
    components: {
      itemList
    },
    watch: {
      searchVal(newV) {
        let val;
        if (newV == '') {
          w_scroll_top(0)
          this.items_data = []
          this.isInit = true
          this.is_more = true
        }
        if (val = newV.replace(/^\s*|\s*$/g, "")) {
          this.isInit = false
          this.val_ = val
          this.page = 1
          this.is_more = true
          this.search_items(true)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }

  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    transition: all 0.35s;
  }

  .words_wrap {
    width: 90%;
    margin: 0 auto;
    > p {
      text-align: left;
      margin-left: 15px;
      margin-top: 11px;
      color: #aaa;
    }
    > ul {
      overflow: hidden;
      > li {
        float: left;
        padding: 8px;
        margin-left: 15px;
        margin-top: 8px;
        border: 1px solid #aaa;
        border-radius: 5px;
        color: #555;
      }
    }
  }
</style>
